<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import { Plus } from "@element-plus/icons-vue";

let formData = reactive({
    form:
    {
        id: 1, wzwh: '', whts: '', mgclb: '', wzmc: '', wzym: '', bqxx: '', zsmc: '', ypmc: '', gsdh: '', android_qrcode: '', jfmc: '',
        iphone_qrcode: '', gz_qrcode: '', gw_a: '', gw_a_title: '', gw_a_url: '', gw_b: '', gw_b_title: '', gw_b_url: '', gsdz: ''
    }

})

const onSubmit = () => {
    console.log('submit!')
}

import axios from 'axios'

const getWzxx = () => {
    //参考接口文档，请求用户数据
    axios.get("/api/wzxx/").then((response) => {
        console.log(response, "网站信息数据")
        //更新用户数据
        formData.form = response.data[0]
        console.log(formData.form, "接收网站信息数据")
    })
}

onMounted(() => {
    getWzxx()
})

const updateWzxx = () => {
    console.log(formData.form, "<-----1111修改网站信息数据")
    axios.patch(`/api/wzxx/${formData.form.id}/`,
        formData.form,
        { headers: { "Content-Type": "multipart/form-data" } }   //application/json
    ).then((response) => {
        console.log(response, "<-----修改网站信息数据")
        // 更新用户数据
        formData.form = response.data[0]
        //console.log(response.data[0], "<------接收网站信息数据")
        // 重新获取数据
        //getWzxx()
    })

}



const headers = ref({
    //携带token传递到后端
    Authorization: "Bearer " + sessionStorage.getItem("token"),
});
// function handleAvatarSuccess(){
//     // 获取到本地图片 上传到传输图片的位置
//   //   imageUrl.value = URL.createObjectURL(uploadFile.raw);
//   // 获取后端返回的图片
//   imageUrl.value = response.url;
// }

</script>

<template>
    <el-form :data="formData.form" :model="formData.form" label-width="auto" style="max-width: 700px; color: black;">
        <el-form-item label="网站维护">
            <el-select prop="wzwh" v-model="formData.form.wzwh">
                <el-option label="打开" value="shanghai" />
                <el-option label="关闭" value="beijing" />
            </el-select>
            <h3>网站维护开启后，无法开启直播，进入直播间</h3>
        </el-form-item>
        <el-form-item label="维护提示" size="">
            <el-input prop="whts" v-model="formData.form.whts" :rows="2" type="textarea" placeholder="Please input" />
            <h3>维护提示信息（200字以内）</h3>
        </el-form-item>
        <el-form-item label="敏感词列表" size="">
            <el-input prop="mgclb" v-model="formData.form.mgclb" :rows="2" type="textarea" placeholder="Please input" />
            <h3>多个以“|”分割</h3>
        </el-form-item>
        <el-form-item label="网站名称" size="">
            <el-input prop="wzmc" v-model="formData.form.wzmc" placeholder="Please input" />
            <h3>云端中国城</h3>
        </el-form-item>
        <el-form-item label="网站域名" size="">
            <el-input prop="wzym" v-model="formData.form.wzym" placeholder="Please input" />
            <h3>格式：http(s)://xxx.com(:端口号)</h3>
        </el-form-item>
        <el-form-item label="版权信息" size="">
            <el-input prop="bqxx" v-model="formData.form.bqxx" :rows="2" type="textarea" placeholder="Please input" />
            <h3>版权信息（200字以内）</h3>
        </el-form-item>
        <el-form-item label="砖石名称" size="">
            <el-input prop="zsmc" v-model="formData.form.zsmc" placeholder="Please input" />
            <h3>用户充值得到的虚拟币名称</h3>
        </el-form-item>
        <el-form-item label="积分名称" size="">
            <el-input prop="jfmc" v-model="formData.form.jfmc" placeholder="Please input" />
            <h3>直播间玩游戏得到的虚拟币名称</h3>
        </el-form-item>
        <el-form-item label="央票名称" size="">
            <el-input prop="ypmc" v-model="formData.form.ypmc" placeholder="Please input" />
            <h3>主播得到的虚拟票名称</h3>
        </el-form-item>
        <el-form-item label="公司电话" size="">
            <el-input prop="gsdh" v-model="formData.form.gsdh" placeholder="Please input" />
        </el-form-item>
        <el-form-item label="公司地址" size="">
            <el-input prop="gsdz" v-model="formData.form.gsdz" placeholder="Please input" />
        </el-form-item>
        <el-form-item label="android版下载二维码" size="">
            <el-upload class="avatar-uploader" action="/api/wzxx/1/" :show-file-list="false" :headers="headers">
                <img style="width: 100px; height: 100px" v-if="formData.form.android_qrcode" :src="formData.form.android_qrcode" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="iPhone版下载二维码" size="">
            <!-- <div class="demo-image__preview">
                <el-image style="width: 100px; height: 100px" prop="ios_qrcode" v-model="formData.form.iphone_qrcode"
                    :src="formData.form.iphone_qrcode" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                    :initial-index="4" fit="cover" />
            </div> -->
            <el-upload class="avatar-uploader" action="/api/wzxx/1/" :show-file-list="false" :headers="headers">
                <img style="width: 100px; height: 100px" v-if="formData.form.iphone_qrcode" :src="formData.form.iphone_qrcode" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="微信公众号" size="">
            <el-upload class="avatar-uploader" action="/api/wzxx/1/" :show-file-list="false" :headers="headers">
                <img style="width: 100px; height: 100px" v-if="formData.form.gz_qrcode" :src="formData.form.gz_qrcode" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="官微A图标" size="">
            <el-upload class="avatar-uploader" action="/api/wzxx/1/" :show-file-list="false" :headers="headers">
                <img style="width: 100px; height: 100px" v-if="formData.form.gw_a" :src="formData.form.gw_a" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="官微A标题" size="">
            <el-input prop="gw_a_title" v-model="formData.form.gw_a_title" placeholder="Please input" />
        </el-form-item>
        <el-form-item label="官微A标题" size="">
            <el-input prop="gw_a_title" v-model="formData.form.gw_a_title" :rows="2" type="textarea"
                placeholder="Please input" />
        </el-form-item>
        <el-form-item label="官微A链接" size="">
            <el-input prop="gw_a_url" v-model="formData.form.gw_a_url" placeholder="Please input" />

        </el-form-item>
        <el-form-item label="官微B图标" size="">
            <el-upload class="avatar-uploader" action="/api/wzxx/1/" :show-file-list="false" :headers="headers">
                <img style="width: 100px; height: 100px" v-if="formData.form.gw_b" :src="formData.form.gw_b" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="官微B标题" size="">
            <el-input prop="gw_b_title" v-model="formData.form.gw_b_title" placeholder="Please input" />
        </el-form-item>
        <el-form-item label="官微B标题" size="">
            <el-input prop="gw_b_title" v-model="formData.form.gw_b_title" :rows="2" type="textarea"
                placeholder="Please input" />
        </el-form-item>
        <el-form-item label="官微B链接" size="">
            <el-input prop="gw_a_title" v-model="formData.form.gw_b_url" placeholder="Please input" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="updateWzxx">保存</el-button>
        </el-form-item>


        <!------------------------------------ 测试 -------------------------------------------->
        <!-- :on-success="handleAvatarSuccess" -->
        <!-- <el-upload class="avatar-uploader" action="/api/wzxx/1/" :show-file-list="false"
              :headers="headers">
            <img v-if="formData.form.iphone_qrcode" :src="formData.form.iphone_qrcode" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
                <Plus />
            </el-icon>
        </el-upload> -->


    </el-form>
</template>


<style scoped>
.el-form-item h3 {
    color: #999;
    font-size: 14px;
}

.el-button {
    margin-left: 170px;
}

.demo-image__error .image-slot {
    font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
    font-size: 30px;
}

.demo-image__error .el-image {
    width: 100%;
    height: 200px;
}
</style>
